/******************** 变量 ********************/
$lv-multiAutocomplete-theme: $component-background !default;
$lv-multiAutocomplete-border-color: $border-color-base !default;
$lv-multiAutocomplete-border-hover-color: #6c7280 !default;
$lv-multiAutocomplete-border-active-color: $primary-color !default;
$lv-multiAutocomplete-border-color-disabled: $border-color-disabled !default;
$lv-multiAutocomplete-background-color-disabled: $disabled-background !default;

.lv-multi-autocomplete-host {
  display: inline-block;
  cursor: pointer;
  width: 100%;
  vertical-align: middle;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family;
  color: $text-color;

  &:not(.lv-multi-autocomplete-disabled) {
    &:hover {
      .lv-multi-autocomplete-wrapper {
        border-color: $lv-multiAutocomplete-border-hover-color;
      }
    }

    &:active {
      .lv-multi-autocomplete-wrapper {
        border-color: $lv-multiAutocomplete-border-active-color;
      }
    }

    &.lv-multi-autocomplete-active {
      .lv-multi-autocomplete-wrapper {
        border-color: $lv-multiAutocomplete-border-active-color;
      }

      &:hover {
        .lv-multi-autocomplete-wrapper {
          border-color: $lv-multiAutocomplete-border-active-color;
        }
      }
    }
  }

  .lv-multi-autocomplete-wrapper {
    border: $border-width-base $border-style-base $lv-multiAutocomplete-border-color;
    border-radius: $padding-xs;
    margin: 0;
    padding: 0;
    min-width: 1rem;
    width: 100%;
    max-height: 2rem;
    overflow: auto;
    background: $lv-multiAutocomplete-theme;
    display: flex;
    flex-flow: row;
    cursor: pointer;

    .lv-multi-autocomplete-content {
      position: relative;
      width: 100%;
    }

    .lv-multi-autocomplete-valuearea {
      position: relative;
      min-height: 0.3rem;
      height: 100%;
      display: flex;
      overflow-x: hidden;
      flex-wrap: wrap;
      margin-left: $margin-sm;

      @include component-scroll;

      .lv-tag-item {
        border-radius: $border-radius-xs;
        padding: $padding-sm;
        height: $height-sm;
        line-height: $line-height-base;
        margin-top: 0.02rem;
        margin-bottom: 0.02rem;
      }
    }

    .lv-multi-autocomplete-textarea {
      min-width: 0.05rem;
      height: 0.3rem;
      border: none;
      padding: 0;
      background-color: transparent;
    }

    .lv-multi-autocomplete-placeholder {
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% - 0.28rem);
      padding-left: 0.08rem;
      color: $text-color-tertiary;
      line-height: 0.3rem;
      overflow: hidden;
    }

    .lv-multi-autocomplete-lint {
      display: inline-block;
      position: absolute;
      left: 0;
      top: -0.23rem;
      font-size: $font-size-base;
      height: 0;
      color: transparent;
    }

    .lv-resize-handle {
      position: absolute;
      background: transparent;
      -webkit-touch-callout: none;
      /* iOS Safari */
      -webkit-user-select: none;
      /* Chrome/Safari/Opera */
      -khtml-user-select: none;
      /* Konqueror */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
      user-select: none;
      height: 0.05rem;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: row-resize;
    }
  }
}

.lv-multi-autocomplete-disabled {
  .lv-multi-autocomplete-wrapper {
    border-color: $lv-multiAutocomplete-border-color-disabled;
    background-color: $lv-multiAutocomplete-background-color-disabled;
    cursor: not-allowed;
  }
}
